<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div class="header">
    <div class="nav">
        <h2>
            <a href="index.html"><img src="img/logo.png" alt=""></a>
        </h2>
        <div class="list_nav">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li class="list_one">
                    云道商场<span><img src="img/top.png" alt=""></span>
                    <ul class="caidan">
                        <li class="li_one">
                            <a href="#">云商场产品</a>
                        </li>
                        <li>
                            <a href="html/pingtai.html">
                                <p>官网云商场</p>
                                <p>免费、简单、高逼格,适用于中小企业的官方快捷商场系统</p>
                            </a>
                        </li>
                        <li>
                            <a href="html/yx.html">
                                <p>品牌综合商场</p>
                                <p>免费、简单、高逼格,适用于中小企业的官方快捷商场系统</p>
                            </a>
                        </li>
                        <li>
                            <a href="html/index.html">
                                <p>多店铺品牌商场</p>
                                <p>免费、简单、高逼格,适用于中小企业的官方快捷商场系统</p>
                            </a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">智慧门店</a></li>
                <li><a href="html/marke.html">营销平台</a></li>
                <li><a href="html/people.html">媒体联盟</a></li>
                <li><a href="#">关于云道</a></li>
            </ul>

        </div>
        <div class="list_two">
            用户中心<span><img src="img/top.png" alt=""></span>
            <ul class="user">
                <li><a href="html/login.html">登录页面</a></li>
                <li><a href="html/register.html">注册</a></li>
                <!--<li><a href="#">官网商场管理</a></li>-->
            </ul>
        </div>
    </div>
</div>
<div class="lunbo">
    <div class="box">
        <a href=""><img src="img/banner-0.png" alt=""></a>
        <a href=""><img src="img/banner-1.png" alt=""></a>
        <a href=""><img src="img/banner-3.png" alt=""></a>
        <a href=""><img src="img/banner-4.png" alt=""></a>
    </div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<div class="index-content">

    <div class="list clearfix">
        <div class="div1"></div>
        <div class="div2">
            我们的产品
            <p>WUO UOTRNH</p>
        </div>
        <div class="div1"></div>
    </div>

    <ul class="index-container clearfix">
        <li>
            <a href="#">
                <div class="list_one">
                    <div class="list_1">
                        <img src="img/index-3.png"/>
                        <p>官网云商城</p>
                    </div>
                    <div class="list_2">
                        <img src="img/index-2.png"/>
                    </div>
                </div>
            </a>
            <div class="zhong">
                <div>我是中小企业</div>
                <p>免费，一键创建，无需维护。我们倾力打造的官网商城系统，帮助中小企业轻松创建高逼格的官网商城...</p>
            </div>
        </li>
        <li class="li-1">
            <a href="#">
                <div class="list_one">
                    <div class="list_1">
                        <img src="img/index-4.png"/>
                        <p>官网云商城</p>
                    </div>
                    <div class="list_2">
                        <img src="img/index-2.png"/>
                    </div>
                </div>
            </a>
            <div class="zhong">
                <div>我是大中型企业</div>
                <p>免费，一键创建，无需维护。我们倾力打造的官网商城系统，帮助中小企业轻松创建高逼格的官网商城...</p>
            </div>
        </li>
        <li class="li-1">
            <a href="#">
                <div class="list_one">
                    <div class="list_1">
                        <img src="img/index-3.png"/>
                        <p>官网云商城</p>
                    </div>
                    <div class="list_2">
                        <img src="img/index-2.png"/>
                    </div>
                </div>
            </a>
            <div class="zhong">
                <div>我是行业专家</div>
                <p>免费，一键创建，无需维护。我们倾力打造的官网商城系统，帮助中小企业轻松创建高逼格的官网商城...</p>
            </div>
        </li>
        <li class="li-1">
            <a href="#">
                <div class="list_one">
                    <div class="list_1">
                        <img src="img/index-5.png"/>
                        <p>官网云商城</p>
                    </div>
                    <div class="list_2">
                        <img src="img/index-2.png"/>
                    </div>
                </div>
            </a>
            <div class="zhong">
                <div>我是地面门店</div>
                <p>免费，一键创建，无需维护。我们倾力打造的官网商城系统，帮助中小企业轻松创建高逼格的官网商城...</p>
            </div>
        </li>
    </ul>
</div>

<div class="index-main">
    <div class="index-tab">
        <div class="list_one">为什么选择
            <span>shopcmd</span>？
        </div>
        <ul class="clearfix">
            <a href="#">
                <li>
                    <div class="list_two">
                        <img src="img/index-6.png"/>
                    </div>
                    <div class="list_san">
                        <div>全面的产品体系</div>
                        <p>简约而不简单，极致的产品体验，最小可行化的产品设计理念，既满足了用户的需求，又极大地降低了用户的使用门槛和运维成本</p>
                    </div>
                </li>
            </a>
            <a href="#">
                <li class="li-2">
                    <div class="list_two">
                        <img src="img/index-8.png"/>
                    </div>
                    <div class="list_san">
                        <div>最简约的系统</div>
                        <p>简约而不简单，极致的产品体验，最小可行化的产品设计理念，既满足了用户的需求，又极大地降低了用户的使用门槛和运维成本</p>
                    </div>
                </li>
            </a>
            <a href="#">
                <li class="li-2">
                    <div class="list_two">
                        <img src="img/index-9.png"/>
                    </div>
                    <div class="list_san">
                        <div>个性化自定义前端</div>
                        <p>简约而不简单，极致的产品体验，最小可行化的产品设计理念，既满足了用户的需求，又极大地降低了用户的使用门槛和运维成本</p>
                    </div>
                </li>
            </a>
            <a href="#">
                <li class="li-2">
                    <div class="list_two">
                        <img src="img/index-10.png"/>
                    </div>
                    <div class="list_san">
                        <div>创建/运行无忧</div>
                        <p>简约而不简单，极致的产品体验，最小可行化的产品设计理念，既满足了用户的需求，又极大地降低了用户的使用门槛和运维成本</p>
                    </div>
                </li>
            </a>
            <a href="#">
                <li class="li-2">
                    <div class="list_two">
                        <img src="img/index-11.png"/>
                    </div>
                    <div class="list_san">
                        <div>全覆盖营销服务</div>
                        <p>简约而不简单，极致的产品体验，最小可行化的产品设计理念，既满足了用户的需求，又极大地降低了用户的使用门槛和运维成本</p>
                    </div>
                </li>
            </a>
        </ul>

    </div>
</div>

<div class="index-msg">
    <div class="msg_1">
        <div class="msg_1_one">
            <img src="img/index-7.png"/>
        </div>
        <div class="msg_1_two">
            <h4>shopcmd云商城系统第三方合作伙伴招募中</h4>
            <p>领先技术，打造高性能</p>
            <p>电商系统，共享千亿saas商机</p>
            <a href="#">
                <div class="msg_1_san">
                    <div>
                        了解加盟细则
                        <span>&gt;</span>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>
<div class="foot">
    <div class="center1 clear">
        <ul class="foot-ul clear">
            <li class="foot-li1">shopcmd</li>
            <li>首页</li>
            <li>云道商城</li>
            <li>智慧门店</li>
            <li>营销平台</li>
            <li>媒体联盟</li>
            <li class="foot-li2">关于云道</li>
            <li class="foot-li3">
                <span><img src="img/dianhua.png"/></span>4008-188-360
            </li>
        </ul>
        <hr class="hr"/>
        <p class="foot-p">&copy;Copyright 2015 苏州云网络科技有限公司版权所有 | 苏ICP备15038170号-3</p>
    </div>
</div>
<div class="postion">
    <a href="#"><img src="img/lianxi.png" alt=""></a>
</div>
</body>
</html>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
    $(".list_one").click(function () {
        $(this).find("ul").stop().slideToggle()
    })
    $(".list_two").click(function () {
        $(this).find("ul").stop().slideToggle()
    })


    var $imga = $(".lunbo .box a");
    var len = $imga.length
    var bw = $(".lunbo .box").width();
    var btn = $(".lunbo li");
    var index = 0;
    var next = 0;

    //图片初始化
    $imga.css("left", bw).eq(0).css("left", 0)

    //按钮初始化
    btn.eq(0).addClass("hot");

    //计时器
    var t = setInterval(movel, 2000);

    //鼠标移入移除
    $(".lunbo").hover(function () {
        clearInterval(t);
    }, function () {
        t = setInterval(movel, 2000);
    })
    //轮播
    function movel() {
        next++;
        if (next == len) {
            next = 0;
        }
        //下一张图片准备
        $imga.eq(next).css({"left": bw});
        //当前图片离开
        $imga.eq(index).animate({"left": -bw});
        //下一张图片显示
        $imga.eq(next).animate({"left": 0})

        //按钮颜色
        btn.eq(index).removeClass("hot");
        btn.eq(next).addClass("hot");

        index = next;
    }

    function mover() {
        next--;
        if (next == -1) {
            next = len - 1;
        }
        //下一张图片准备
        $imga.eq(next).css({"left": -bw});
        //当前图片离开
        $imga.eq(index).animate({"left": bw});
        //下一张图片显示
        $imga.eq(next).animate({"left": 0})

        //按钮颜色
        btn.eq(index).removeClass("hot");
        btn.eq(next).addClass("hot");
        index = next;
    }
</script>
